<template>
  <fieldset>
    <legend>cart</legend>
    <h1>{{ tag }}</h1>
    <h1>{{ this.$store.state.cart.tag }}</h1>
    <span v-for="item in carts" :key="item.id" style="font: 12px/30px ''">
      {{ item.title }}------数量:{{ item.num }}-----单价{{ item.price }}
      <button
        @click="cartsOut"
        style="
          font-size: 25px;
          text-align: center;
          vertical-align: top;
          border: 0;
          background: white;
        "
      >
        x
        <span style="color: gray; font: 12px/30px ''; vertical-align: text-top">
          移出购物车
        </span>
      </button>
      <br />
    </span>
    <h1 :style="{ textAlign: 'right' }">
      总价格：
      <span :style="{ color: 'red' }">
        <!-- {{ $store.getters["cart/total"] }} -->
        <!-- {{ total }} -->
        {{ total.toFixed(2) }}
      </span>
    </h1>
  </fieldset>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  methods: {
    cartsOut() {
      console.log(this.$store.getters["cart/total"]);
    },
  },
  mounted() {},
  computed: {
    ...mapState("cart", ["tag", "carts"]),
    ...mapGetters("cart", ["total"]),
  },
};
</script>
